<template>
	<div>
		<div class="addmulClass">
			<el-button type='info' @click='clickAddMulMethod(false)' plain>-</el-button>
			<el-input @focus="blurClick" v-model="inputValue" placeholder="请输入内容" class='inputClass'
				@change="checkInput()"></el-input>
			<el-button type='info' @click='clickAddMulMethod(true)' plain>+</el-button>
		</div>
		<div class="CalculatorClass">
			<el-row :gutter="12">
				<el-col :span="8">
					<el-card shadow="hover">
						<div @click="clickCard('1')">1</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="hover">
						<div @click="clickCard('2')">2</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="hover">
						<div @click="clickCard('3')">3</div>
					</el-card>
				</el-col>
			</el-row>
			<el-row :gutter="12">
				<el-col :span="8">
					<el-card shadow="hover">
						<div @click="clickCard('4')">4</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="hover">
						<div @click="clickCard('5')">5</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="hover">
						<div @click="clickCard('6')">6</div>
					</el-card>
				</el-col>
			</el-row>
			<el-row :gutter="12">
				<el-col :span="8">
					<el-card shadow="hover">
						<div @click="clickCard('7')">7</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="hover">
						<div @click="clickCard('8')">8</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="hover">
						<div @click="clickCard('9')">9</div>
					</el-card>
				</el-col>
			</el-row>
			<el-row :gutter="12">
				<el-col :span="8">
					<el-card shadow="hover">
						<div @click="clickCardClt()">CLT</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="hover">
						<div @click="clickCard('0')">0</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="hover">
						<div @click="clickCard('.')">.</div>
					</el-card>
				</el-col>
			</el-row>
			<el-row :gutter="12">
				<el-col :span="24">
					<el-button class='clickButtonOk' type="primary" @click="clickCardOk()">OK</el-button>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import Arithmetic from '@/utils/ArithmeticMethod.js'
	export default {
		name: "Calculator",
		data() {
			return {
				inputValue: 0
			}
		},
		methods: {
			clickCard(value) {
				if (this.inputValue.length > 15) {
					this.$message({
						message: '输入数据超过限定长度',
						type: 'warning'
					});
					return
				}
				if ((this.inputValue == 0.0 && value == 0.0) || (this.inputValue == 0 && value == 0)) {
					this.inputValue = 0
				} else if (parseFloat(this.inputValue) == 0.0) {
					if (value == '.') {
						this.inputValue += '.'
					} else {
						var result = this.inputValue.toString().indexOf(".");
						if (result != -1) {
							this.inputValue += value
						} else {
							this.inputValue = value
						}
					}
				} else {
					var result = this.inputValue.toString().indexOf(".");
					if (value == '.' && result != -1) {
						this.$message({
							message: '请输入正确小数',
							type: 'warning'
						});

					} else {
						this.inputValue += value
					}
				}
			},
			clickCardClt() {
				this.inputValue = 0
			},
			clickAddMulMethod(value) {
				if (value) {
					this.inputValue = Arithmetic.accAdd(parseFloat(this.inputValue), 1)
				} else {
					if (parseFloat(this.inputValue) > 0.9999999999) {
						this.inputValue = Arithmetic.accSub(parseFloat(this.inputValue), 1)
					} else {
						this.$message({
							message: '请输入正数',
							type: 'warning'
						});
						this.inputValue = 0.0
					}
				}
			},
			// 获取焦点时先判断是否为0是则清空 否则不动
			blurClick() {
				if (parseFloat(this.inputValue) == 0.0) {
					this.inputValue = ''
				}
			},
			checkInput() {
				if (parseFloat(this.inputValue) < 0.0000000000001) {
					this.$message({
						message: '请输入正数',
						type: 'warning'
					});
					this.inputValue = 0.0
				}
			},
			clickCardOk() {
				this.$emit('clickCardOk', this.inputValue)
				this.inputValue = 0.0
			}
		}
	}
</script>

<style scoped lang="scss">
	.inputClass {
		/deep/.el-input__inner {
			height: 5vh;
			width: 20vw;
			font-size: calc(100vh - 97vh);
		}
	}

	.addmulClass {
		width: 28vw;
		display: flex;
		justify-content: center;
		align-items: center;

		.el-button {
			height: 5vh;
			width: 4vw;
			font-size: 2vw;
			line-height: 0vh;
			// color: #000000;
		}
	}

	.CalculatorClass {
		font-size: 2vw;

		.el-row {
			margin-top: 30px;
		}
	}

	.clickButtonOk {
		width: 100%;
		height: 5vh;
		font-size: 1.5vw;
		line-height: 100%;
	}

	.clickButtonOk:hover {
		-webkit-box-shadow: #ccc 0px 10px 10px;
		-moz-box-shadow: #ccc 0px 10px 10px;
		box-shadow: #ccc 0px 10px 10px;
	}
</style>
